<template>
  <div class="home">
    <!-- 搜索框 -->
    <div class="top">
      <div class="topp">
        <span @click="goinCity">{{city || '北京'}}</span>
        <van-icon name="arrow-down" />
      </div>
      <div class="toppp">
        <van-icon name="search" />
        <input type="text" placeholder="请输入小区或地址">
      </div>
      <div class="hh" @click="fnnn">
        <van-icon name="location-o" />
      </div>
    </div>
    <!-- 轮播图 -->
    <div style="height: 212px" class="swipers">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- Grid -->
    <div>
      <van-grid>
        <van-grid-item icon="wap-home-o" text="整租" />
        <van-grid-item icon="friends-o" text="合租" />
        <van-grid-item icon="comment-circle-o" text="地图找房" />
        <van-grid-item icon="shop-o" text="去出租" to="/go" />
      </van-grid>
    </div>
    <div>
      <van-nav-bar left-text="租房小组" right-text="更多" />
      <van-grid :column-num="2">
        <van-grid-item icon="photo-o" text="家住回龙观归属的感觉" />
        <van-grid-item icon="photo-o" text="宜居四五环大都市生活" />
        <van-grid-item icon="photo-o" text="喧器三里屯繁华的背后" />
        <van-grid-item icon="photo-o" text="比邻十号线地铁心连心" />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/storage";
export default {
  data() {
    return {
      images: [
        "http://liufusong.top:8080/img/swiper/1.png",
        "http://liufusong.top:8080/img/swiper/2.png",
        "http://liufusong.top:8080/img/swiper/3.png",
      ],
    };
  },
   computed: {
    city () {
      return this.$route.query.data
    }
  },
  methods: {
    fnnn(){
     this.$router.push('/map')
    },
    fn() {
      this.$router.push("/city");
    },
    goinCity() {
      if (getToken()) {
        this.$router.push("/city");
      } else {
        this.$toast.fail("还没登陆呢宝贝");
        this.$router.push("/login");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  position: relative;
  .top {
    margin-left: 60px;
    position: absolute;
    top: 25px;
    width: 300px;
    padding: 0 10px;
    z-index: 2;
    display: flex;
    .topp {
      span {
        color: #000;
        font-size: 14px;
      }
      line-height: 30px;
      height: 30px;
      background-color: #fff;
      float: left;
    }
    .toppp {
      width: 200px;
      line-height: 30px;
      height: 30px;
      background-color: #fff;
      display: flex;
    .van-icon{
      margin-top: 5px;
      font-size: 18px;
    }
    input{
      border: none;
    }
    }
    .hh {
      line-height: 30px;
      height: 30px;
      float: right;
    }
  }
}
</style>
